/**
 * 文档作者: wj
 * 创建时间：2018年05月15日
 * 修改时间：2018年05月15日
 * 描述信息：产品列表
 */

import React, {Component} from 'react';
import './product-list.scss';

class ProductList extends Component {
    constructor(props) {
        super(props);
        this.data = props.data;
    }
    render() {
        return (
        <div className='product-list-component'>
            {
                this.props.data&&this.props.data.map(value => {
                    const star = this.getStar(value.star);
                    return <div onClick={this.props.onProductList.bind(null, value)} key={value.id} className='product-list both-sides'>
                        <img alt='product' className='product' src={value.coverImage} />
                        <div className='right'>
                            <h1>{value.title}</h1>
                            <h2>{value.sub_title}</h2>
                            <p className='dect'>{value.param || '暂无介绍!'}</p>
                            {star.map((val, index) => {
                                return <img key={index} 
                                    className='star'
                                    alt='star' 
                                    src={require(`../../../assets/img/${val === 2 ? 'star' : val === 0 ? 'no_star' : 'half_star'}.png`)} />
                            })}
                            <p className='money'>¥&nbsp;{value.price}</p>
                        </div>
                    </div>
                })
            }
        </div>)
    }

    /**
     * 计算star
     * @param {Number} value star数
     * @return {Array} 0: 没星 - 1:半星 - 2:满星
     */
    getStar(value) {
        let star = [];
        if (String(value).indexOf('.5') !== -1) {
            star = new Array(Number(String(value).replace('.5', ''))).fill(2);
            star.push(1);
        } else {
            star = new Array(Math.round(value)).fill(2);
        }
        const addStar = function() {
            if (star.length < 5) {
                star.push(0);
                addStar();
            }
        }
        addStar();
        return star;
    }
}

export default ProductList;

